.display-flex {
  display: flex;
}

.flex {
  flex: 1
}

.justify-content {
  justify-content: center;
}

.align-items {
  align-items: center
}

.border-radius {
  border-radius: 1px;
}

.transform {
  transform: scale(.5);
}

body {
  color:blue;
}

.blue {
  color: blue;
  background: #6d6d72;
  height: 200px;
  vertical-align: middle;
  overflow:hidden;
}

.box {
  display: flex;
}

.fn-left {
  float: left;
}

.fn-right {
  float: right;
}

.txt {
  display: inline-block;
}

// http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

.flex-container {
  background: #8f8f94;
  display: flex;
  height: 500px;
  //flex-direction: row; // 改变主轴的方向或者位置
  //flex-wrap: wrap;  // 是否换行
  flex-flow: row wrap; // flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  justify-content: flex-start; // 当只有一个主轴，主轴上的对齐方式 跟flex-item的width相关
  align-items: stretch; // 当只有一个主轴，交叉轴上的对齐方式 跟flex-item的height相关 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  align-content: center; // 当只有多个主轴w(rap方式并且flex-item宽度>100% 就会形成多个主轴)。对齐着眼点为交叉轴

  .flex-item {
    width: 30%;

    &:nth-child(1) {
      background: red;
      font-size: 45px;
    }

    &:nth-child(2) {
      order: 2;
      width: 50%;
      background: green;
      //height: 80px;
    }

    &:nth-child(3) {
      width: 40%;
      font-size: 20px;
      background: blue;
      //height: 60px;
    }

    &:nth-child(4) {
      width: 50%;
      //height: 40px;
      background: yellow;
    }

    &:nth-child(5) {
      width: 70%;
      height: auto;
      background: teal;
    }
  }
}

.flex-container-base {
  display: flex;
  color: #fff;
  background: #8f8f94;
  .flex-item {
    width: 100%;
    &:nth-child(1) {background: red;}
    &:nth-child(2) {background: green;}
    &:nth-child(3) {background: blue;}
    &:nth-child(4) {background: yellow;}
    &:nth-child(5) {background: teal;}
  }
}
// 默认的order具体为多少不清楚?
// flex-grow 对剩余空间的分配 默认为0，不放大
// flex-shrink 等比缩放 为0保持原样，默认1
// flex-basis ITEM占据的主轴剩余空间

/**
flex: 0 1 auto; flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
auto(1 1 auto)
none(0 0 auto)
*/

// align-self
.flex-container-for-item {
  height: 300px;
  .flex-item {
    width: 10%;
    &:nth-child(1) {
      //order: 0;
      //flex-grow: 2;
      //flex-shrink: 0;
      //flex-basis: 70%;
      align-self: flex-start;
    }
    &:nth-child(2) {
      //order: 1.5;
      //flex-grow: 1;
    }
    &:nth-child(3) {
      //order: 1.5;
    }
    &:nth-child(4) {
      //order: 4;
    }
    &:nth-child(5) {
      //order: -1;
    }
  }
}


